<template>
  <div>
    <div
      class="br-12 bg-c-white pt-28 pb-20 pl-28 pr-28 ml-30"
      v-loading="loading"
    >
      <div class="fs-18 lh-20 fw-600 mb-22 card_title">系统消息</div>
      <div
        class="d-flex list_item mt-20"
        v-for="item in articleList"
        :key="item.id"
      >
        <img
          :src="item.type == 1 ? noc_01 : noc_02"
          height="34"
          class="mr-14"
          alt=""
        />
        <div class="fl1">
          <div class="d-flex">
            <div class="mr-6 show-operate fs-14 c-333 fw-600">
              {{ item.title }}
            </div>
            <el-tag type="danger" size="small" v-if="item.is_read !== 0">
              未读
            </el-tag>
            <el-tag type="success" size="small" v-else>已读</el-tag>
          </div>
          <div class="d-flex fs-14 lh-20 mt-8 d-between">
            <div class="show-operate fl1 c-666">
              {{ item.content }}
            </div>
            <router-link
              to="/app/noticeList"
              class="el-link el-link--primary fs-14 lh-20"
            >
              <u class="el-link--inner">详情</u>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 查看全部 -->
      <router-link
        to="/app/noticeList"
        class="el-link el-link--primary fs-14 lh-20 more_lab"
      >
        <u class="el-link--inner">查看更多>></u>
      </router-link>
    </div>
    <div
      class="br-12 bg-c-white pt-28 pb-20 pl-28 pr-28 ml-30 mt-30"
      v-loading="loading"
    >
      <div class="fs-18 lh-20 fw-600 mb-22 card_title">站内信</div>
    </div>
  </div>
</template>

<script>
  import noc_01 from '@/assets/image/home/noc_01.png'
  import noc_02 from '@/assets/image/home/noc_02.png'
  import { removeTags } from '@/utils'
  import { getArticleList } from '@/api/notice'
  export default {
    data() {
      return {
        noc_01,
        noc_02,
        loading: false,
        list: [],
        query: {
          page: 1,
          limit: 4,
        },
        articleList: null,
      }
    },
    created() {
      this.getArticle()
    },
    methods: {
      async getArticle() {
        const {
          data: { data },
        } = await getArticleList(this.query)
        if (data)
          data.forEach((item) => {
            item.content = removeTags(item.content)
          })
        this.articleList = data
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card_title {
    padding-left: 10px;
    color: #333;
    border-left: 4px solid #6b1ce9;
  }
  .show-operate {
    max-width: 260px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .more_lab {
    display: block;
    margin-top: 21px;
    text-align: center;
  }
  .list_item {
    padding-bottom: 18px;
    border-bottom: 1px solid #f3f3f3;
  }
</style>
